<template>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        会话与设备数据
        <small>管理设备的会话与上报数据、下行指令</small>
      </h1>
    </section>

    <!-- Main content -->
    <section class="content container-fluid">
      <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
          <div class="box box-info">
            <div class="box-header with-border">
              <h3 class="box-title">会话数据</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table class="table table-hover table-responsive">
                <thead>
                  <tr>
                    <th>会话</th>
                    <th>数据序号</th>
                    <th>数据方向</th>
                    <th>内容预览</th>
                    <th>时间</th>
                    <th>数据状态</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="item in data" :key="item.sessionid" @click="sessionItemClicked(item.itemid)">
                    <td>{{item.sessionid}}</td>
                    <td>{{item.itemid}}</td>
                    <td>{{item.direction}}</td>
                    <td>{{item.message}}</td>
                    <td>{{item.create_time}}</td>
                    <td>{{item.stat}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 data_parser_div" v-show="isParserShow">
          <div class="box box-solid">
            <div class="box-header with-border">
              <i class="fa fa-database"></i>
              <h3 class="box-title">数据解析</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <h4>ASCII</h4>
              <div class="content_show">
                <span>{{ascii_content}}</span>
              </div>
              <h4>HEX</h4>
              <div class="content_show">
                <span>{{hex_content}}</span>
              </div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>

      </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
</template>

<style>
div.content_show {
  word-wrap: break-word;
}
div.data_parser_div {
  position: fixed;
  right: 30px;
  top: 200px;
  width: 400px;
}
</style>

<script>
import { mapState } from 'vuex';

function str2ab(str) {
  var buf = new ArrayBuffer(str.length*2); // 2 bytes for each char
  var bufView = new Uint16Array(buf);
  for (var i=0, strLen=str.length; i<strLen; i++) {
    bufView[i] = str.charCodeAt(i);
  }
  return buf;
}

function str2hex(str) {
  let rsp = "";
  let buffer = str2ab(str);
  let u16view = new Uint16Array(buffer);
  for(let i=0; i != u16view.length; ++i) {
    let cur = u16view[i].toString(16);
    if(cur.length === 1) {
      cur = '0' + cur;
    }
    rsp += cur;
  }
  return rsp.toUpperCase();
}

export default {
  name: 'Sessions',
  data: function() {
    return {
      isParserShow: false,
      currentShow: -1,
      ascii_content: '',
      hex_content: '',
    }
  },
  computed: {
    ...mapState({
      data: state => state.sessions.data,
      session_data: (state) => {
        let resp = {};
        for (let i = 0; i != state.sessions.data.length; ++i) {
          resp[state.sessions.data[i].itemid] = state.sessions.data[i];
        }
        return resp;
      }
    }),
  },
  created() {
    document.title = "会话数据";
    this.$store.dispatch('load_sessions');
  },
  methods: {
    sessionItemClicked(itemid) {
      if (itemid === this.currentShow) {
        this.isParserShow = !!!this.isParserShow;
      } else {
        this.isParserShow = true;
      }
      this.currentShow = itemid;
      this.ascii_content = this.session_data[itemid].message;
      this.hex_content = str2hex(this.ascii_content);
    }
  }
}
</script>
